@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
body{
	background:#333;
}
a{
	text-decoration:none;
}

.container{
	width:1000px;
	height:300px;
	margin:0 auto;
	margin-top:40px;
}
.container .box{
	width:200px;
	height:200px;
	float:left;
	margin:0 66.66666667px;
}

.box .icon{
	display:block;
	height:140px;
	width:170px ;
	margin:0 auto;
	margin-bottom:20px;
	transition:all 0.2s;
	-moz-transition:all 0.2s;
	-o-transition:all 0.2s;
	-webkit-transition:all 0.2s;
}

.kuai-box .icon{
	background:url(kuai.png) no-repeat;

}
.zhun-box .icon{
	background:url(zhun.png) no-repeat;

}
.hen-box .icon{
	background:url(hen.png) no-repeat;

}

.box .icon:hover{
	transform:scale(1.2) rotate(360deg);
	-moz-transform:scale(1.2) rotate(360deg);
	-o-transform:scale(1.2) rotate(360deg);
	-webkit-transform:scale(1.2) rotate(360deg);
}
.box .button{
	width:156px;
	height:45px;
	line-height:45px;
	display:block;
	font-size:25px;
	font-weight:bold;
	color:#2ecc71;
	font-family:"雅黑";
	padding-left:20px;
	background:url(jiantou.png) no-repeat 110px center;
	margin:0 auto;
	border:2px solid rgba(255,255,255,0.6);
	transition:all 0.2s;
	-moz-transition:all 0.2s;
	-o-transition:all 0.2s;
	-webkit-transition:all 0.2s;
	position:relative;
}
.box .button:hover{
	background-position:130px center;
	border:2px solid rgba(255,255,255,1);
}
.box .line{
	background:rgba(255,255,255,1);
}

/*顶部线条*/
.box .line-top{
	display:block;
	top:-2px;
	left:-182px;
	position:absolute;
	width:0px;
	height:2px;
	transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.box .button:hover .line-top{
	width:180px;
	left:-2px;
}
/*底部线条*/
.box .line-botton{
	display:block;
	bottom:-2px;
	right:-182px;
	position:absolute;
	width:0px;
	height:2px;
	transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.box .button:hover .line-botton{
	width:180px;
	right:-2px;
}
/*右边线条*/
.box .line-right{
	display:block;
	right:-2px;
	top:-51px;
	position:absolute;
	width:2px;
	height:0px;
	transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.box .button:hover .line-right{
	height:49px;
	top:-2px;
}
/*左边线条*/
.box .line-left{
	display:block;
	left:-2px;
	bottom:-51px;
	position:absolute;
	width:2px;
	height:0px;
	transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.box .button:hover .line-left{
	height:49px;
	bottom:-2px;
}
